import { sysProfileControllerAvatar } from '@/services/ess/sysProfile';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import type { UploadProps } from 'antd';
import { message, Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
import React, { useEffect, useRef, useState } from 'react';
import style from '../index.less';

const beforeUpload = (file: any, intl: any) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error(intl.formatMessage({ id: 'login.avatarType' }));
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error(intl.formatMessage({ id: 'login.avatarSize' }));
  }
  return isJpgOrPng && isLt2M;
};
interface typeProps {
  imgurl?: string;
  handleAddSubmit: (data: any) => void;
}
const App: React.FC<typeProps> = (props) => {
  const { imgurl, handleAddSubmit } = props;
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>('');
  const uploadRef = useRef();
  const intl = useIntl();
  useEffect(() => {
    if (imgurl) {
      setImageUrl(imgurl);
    }
  }, [imgurl]);

  const uploadProps: UploadProps = {
    name: 'file',
    multiple: true,
    showUploadList: false,
    customRequest: async (info) => {
      // console.log(info,"skfsjdlj")
      beforeUpload(info.file, intl);
      sysProfileControllerAvatar({ attr: info.file })
        .then((res) => {
          console.log(res);
          if (res.success) {
            message.success(intl.formatMessage({ id: 'login.avatarDone' }));
            setLoading(false);
            handleAddSubmit(true);
          } else {
            setLoading(false);
            message.error(intl.formatMessage({ id: 'login.avatarFail' }));
          }
        })
        .catch(() => {
          setLoading(false);
          message.error(intl.formatMessage({ id: 'login.avatarFail' }));
        });
    },
  };

  const uploadButton = (
    <button style={{ border: 0, background: 'none' }} type="button">
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </button>
  );

  return (
    <>
      <ImgCrop rotationSlider>
        {/* <Upload
          id="avatarUpload"
          name="attr"
          listType="picture-circle"
          className="avatar-uploader"
          showUploadList={false}
          action="user/profile/avatar"
          beforeUpload={beforeUpload}
          onChange={handleChange}
          ref={uploadRef}
        >
          {imageUrl ? (
            <div className={style.uploadPhoto} style={{ backgroundImage: `url(${imageUrl})` }} />
          ) : (
            uploadButton
          )}
        </Upload> */}

        <Upload
          {...uploadProps}
          ref={uploadRef}
          id="avatarUpload"
          listType="picture-circle"
          className="avatar-uploader"
        >
          {imageUrl ? (
            <div className={style.uploadPhoto} style={{ backgroundImage: `url(${imageUrl})` }} />
          ) : (
            uploadButton
          )}
        </Upload>
      </ImgCrop>
      <label htmlFor="avatarUpload">{intl.formatMessage({ id: 'login.avatar' })}</label>
      {/* <p onClick={handleUploadClick}>修改头像</p> */}
      <p>{intl.formatMessage({ id: 'login.imgTips' })}</p>
    </>
  );
};

export default App;
